<template>
    <div class="header">
        <div class="header-left">
            <div class="img">
                <img v-if="props.query.logo" :src="props.query.logo" alt="" />
            </div>
            <div class="msg">
                <div class="name">{{ props.query.name }}</div>
                <div class="id">
                    客易达店铺ID：{{ props.query.retail_shop_id }}
                    <el-icon class="icon" @click="copyID(props.query.retail_shop_id)"><CopyDocument /></el-icon>
                </div>
                <div>
                    <span class="source">{{ props.query.source_name }}</span>
                </div>
            </div>
        </div>
        <div class="header-right">
            <el-button type="primary" @click="toSetting">应用配置</el-button>
        </div>
    </div>
</template>
<script setup lang="tsx">
import useClipboard from 'vue-clipboard3';
import { reactive, ref, watch, computed } from 'vue';
import router from '@/router';
import { ElMessage } from 'element-plus';

const props = defineProps(['query']);

const toSetting = () => {
    const path = '/channelconfig/developConfiguration/basicConfiguration';
    router.push(path);
};
const { toClipboard } = useClipboard();
watch(
    () => props.query,
    val => {}
);
const copyID = async (v: any) => {
    try {
        await toClipboard(v);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};
</script>
<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;

    .header-left {
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fafafa;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .msg {
            margin-left: 12px;

            div {
                color: #555;
                line-height: 1.8;
            }

            .name {
                font-weight: 500;
                font-size: 14px;
            }

            .id {
                font-size: 13px;
                font-weight: 300;

                .icon {
                    padding-left: 2px;

                    &:hover {
                        cursor: pointer;
                        color: #ff6b00;
                    }
                }
            }

            .source {
                line-height: 1;
                font-weight: 400;
                font-size: 13px;
                padding: 2px 8px;
                background-color: #fff0e7;
                border: 1px solid #ffc69e;
                color: #ff6b00;
            }
        }
    }

    .header-right {
    }
}
</style>
